import {delay, designPage, useStyleCache} from "@peryl/react-compose";
import {useCmsEditorOption} from "../module/cms-visual-editor";
import {CmsEditor} from "../../packages";
import {ClientZoom} from "plain-design";
import {RouteSelector} from "../components/RouteSelector";

/**
 * 测试绑定变量加载期间阻塞组件渲染
 * @author  韦胜健
 * @date    2024.9.1 9:21
 */
export default designPage(() => {

  const option = useCmsEditorOption({
    isRunning: false,
    titleRightContent: () => <RouteSelector/>,
  });

  /*查询接口
  之前等待2s*/
  option.runningHooks.onBeforeQueryEntity.use(async () => {
    await delay(2000);
  });

  console.log({ option }, option.state.getStateData());

  import('./test-block-render.data.json').then(resp => {option.methods.updateData(resp.default as any);});

  const styles = useStyleCache(style => {
    style.minHeight = `calc(100vh / ${ClientZoom.get()})`;
  });

  return () => (
    <CmsEditor option={option} style={styles.value}/>
  );
});
